<!--
 * @Author: Sam
 * @Date: 2020-08-20 12:20:37
 * @LastEditTime: 2021-11-02 11:08:42
 * @LastEditors: Sam
 * @Description:
 * @FilePath: \resourcesf:\thework\ygboost-eui\src\components\app\components\TableModule\index.vue
 * @<TableModule
        need-checkbox   => 选择框
        need-serial-number   => 序列号
        :table-columns="tableColumns"   => 表格头部
        :table-data="pickupInfo"        => 表格数据
        :table-operation="tableOperation" => 表格操作
        @clickOperation="operationList" => 操作返回
      />
       

      tableColumns: [
        {prop: '',label: '', type: 'img'} 1.img, 2.tag, 3.link,4.dialog,
      ]
      pickupInfo: [  表格数据类型
        {
          // status: '待确认',    ===> 字符串
          status: {              ===> 对象
            label: '待确认',
            tag: { type: 'danger', label: '国外退件' }
          },
        }
      ],
      tableOperation: [  操作数据类型   type: svg/i/text, child是弹出框操作
        { name: 'return', tips: '打回', type: 'svg' },
        { name: 'printer', tips: '打印', type: 'i' },
        { name: 'moreOperation', tips: '更多', type: 'text', child: [ { label: '申请扣件' }, { label: '轨迹查询', route: '' } ] }
      ]
-->

<template>
  <el-table
    class="table-box"
    :border="true"
    :data="tableData"
    style="width: 100%"
    size="mini"
    @selection-change="handleSelectionChange"
  >
    <el-table-column v-if="needCheckbox" type="selection" align="center" />
    <el-table-column v-if="needSerialNumber" type="index" label="序号" />
    <!-- 遍历col -->
    <ex-table-column
      v-for="column in tableColumns"
      :width="columnWidth(column.prop)"
      :key="column.prop"
      :auto-fit="true"
      :fit-header="true"
      :show-overflow-tooltip="true"
      :prop="column.prop"
      :label="column.label"
    >
      <template slot-scope="scope" class="column-wrapper">
        <template v-if="column.type">
          <!-- tag -->
          <template v-if="column.type === 'vue'">
            <el-tag :type="scope.row[column.prop]" effect="dark" size="mini">
              {{ scope.row[column.prop] }}
            </el-tag>
          </template>
          <!-- tag -->
          <template v-else-if="column.type === 'tag'">
            <el-tag :type="scope.row[column.prop]" effect="dark" size="mini">
              {{ scope.row[column.prop] }}
            </el-tag>
          </template>
          <!-- img -->
          <template v-else-if="column.type === 'img'">
            <el-image
              style="width: 25px; height: 25px"
              :src="sortUrl(scope.row[column.prop])"
              :preview-src-list="[sortUrl(scope.row[column.prop])]"
            >
              <div slot="error" class="image-slot">
                <i
                  class="el-icon-picture-outline"
                  :title="sortUrl(scope.row[column.prop])"
                ></i>
              </div>
            </el-image>
          </template>
          <!-- link -->
          <template v-else-if="column.type === 'link'">
            <el-link :href="scope.row.link">{{
              scope.row[column.prop]
            }}</el-link>
          </template>
          <template v-else-if="column.type === 'boolean'">
            {{
              scope.row[column.prop] == 0
                ? "否"
                : scope.row[column.prop]
                ? "是"
                : ""
            }}
          </template>
          <template v-else-if="column.type === 'popup'"></template>
        </template>
        <template v-else>
          <div
            class="column-content auto-fit-target"
            :title="
              scope.row[scope.column.property] &&
              Object.prototype.toString.call(
                scope.row[scope.column.property]
              ) === '[object Object]'
                ? scope.row[scope.column.property].label
                : scope.row[scope.column.property]
            "
          >
            <!-- 判断是否为对象 -->
            <div
              v-if="
                scope.row[scope.column.property] &&
                  Object.prototype.toString.call(
                    scope.row[scope.column.property]
                  ) === '[object Object]'
              "
            >
              {{ scope.row[scope.column.property].label }}
              <!-- 判断是否有tag -->
              <template v-if="scope.row[scope.column.property].tag">
                <el-tag
                  :type="scope.row[scope.column.property].tag.type"
                  effect="dark"
                  size="mini"
                >
                  {{ scope.row[scope.column.property].tag.label }}
                </el-tag>
              </template>
            </div>
            <!-- 非对象直接显示 -->
            <span v-else>
              {{ scope.row[scope.column.property] }}
            </span>
          </div>
        </template>
      </template>
    </ex-table-column>
  </el-table>
</template>

<script>
import { mapGetters } from "vuex";
import globalData from "@/utils/config";
import * as constant from "@/store/yg/common/constant";
export default {
  props: {
    needCheckbox: {
      type: Boolean,
      // 需要的时候只需填写行内属性名 need-checkbox / 或者 动态填写 :need-checkbox="false/true"
      default: false
    },
    needSerialNumber: {
      type: Boolean,
      default: false
    },
    tableColumns: {
      type: Array,
      // 表格头部信息
      default: function() {
        return [];
      }
    },
    tableOperation: {
      type: Array,
      // 表格操作列表
      default: function() {
        return [];
      }
    },
    tableData: {
      type: Array,
      // 表格数据
      default: function() {
        return [];
      }
    },
    multipleSelection: {
      type: Array,
      // 选择的数据
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["publicData"])
  },
  filters: {},

  methods: {
    sortUrl(value) {
      if (!value) return "";
      const url =
        value.indexOf("http") > -1 ? value : constant.FILE_SERVER + value;
      return url;
    },
    onOperation(data, item, index) {
      this.$emit("clickOperation", data, item, index);
    },
    showTooltip(data, item, index) {
      if (item.name === "eye-open") {
        console.log("show eye-open", data);

        if (!data.otherInfo) {
          this.$emit("clickOperation", data, item, index);
        }
      }
    },
    handleSelectionChange(val) {
      this.$emit("update:multipleSelection", val);
    },
    columnWidth(prop) {
      let widthStr = "";
      if (prop === "sku") {
        widthStr = 120;
      } else if (prop === "shipmentId" || prop === "referenceId") {
        widthStr = 125;
      } else if (
        prop === "purchasingPrice" ||
        prop === "declareValue" ||
        prop === "isCharged" ||
        prop === "measurementUnit"
      ) {
        widthStr = 80;
      }
      return widthStr;
    }
  }
};
</script>

<style lang="scss">
.table-grid {
  display: flex;
  .table-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    // height: 16px;
    text-align: center;
    // width: 16px;
    float: left;
    font-size: 14px;
    color: #24292e;
    cursor: pointer;
  }
}
</style>
